<template>
    <view class="customer-add">
        <view class="tit-box" @mousedown="mousedown">
            <view class="add-g-title">{{
                actType == 0 ? addCustomTitTxt : editCustomTitTxt
            }}</view>
            <minMaxClose></minMaxClose>
        </view>

        <view class="info-box comm-list-scroll">
            <!-- 头像 -->
            <addPhoto ref="customAddPhoto" @uploadAavatar="uploadAavatar">
            </addPhoto>
            <!-- 基础信息 -->
            <view class="info-base">
                <!-- 性别 -->
                <view class="c-row">
                    <text class="r-lb">{{ genderTxt }}</text>
                    <view class="radio-box">
                        <radio
                            :checked="saveData.gender == 1"
                            @click="onGenderRadio(1)"
                        ></radio>
                        <view class="tit-txt">{{ manTxt }}</view>
                    </view>
                    <view class="radio-box">
                        <radio
                            :checked="saveData.gender == 2"
                            @click="onGenderRadio(2)"
                        ></radio>
                        <view class="tit-txt">{{ womanTxt }}</view>
                    </view>
                </view>
                <!-- 客户名称 -->
                <inputTxt
                    ref="cName"
                    :title="nameLb"
                    :value="saveData.name"
                    :isMust="true"
                    :maxlength="50"
                    @input="inputName"
                ></inputTxt>
                <!-- 客户电话 -->
                <inputTxt
                    ref="cPhone"
                    :title="phoneLb"
                    :value="saveData.cellphone"
                    :isMust="true"
                    :maxlength="11"
                    type="number"
                    @input="inputPhone"
                ></inputTxt>
                <!-- 客户公司 -->
                <inputTxt
                    ref="cCompany"
                    :title="companyLb"
                    :value="saveData.company"
                    @input="inputCompany"
                ></inputTxt>
                <!-- 客户email -->
                <inputTxt
                    ref="cEmail"
                    :title="emailLb"
                    :value="saveData.email"
                    @input="inputEmail"
                ></inputTxt>

                <!-- 国内，国外 -->
                <view class="c-row">
                    <text class="r-lb">{{ cuntryLb }}</text>
                    <view class="radio-box">
                        <radio
                            :checked="saveData.country == 1"
                            @click="onCountryRadio(1)"
                        ></radio>
                        <view class="tit-txt">{{ chinaTxt }}</view>
                    </view>
                    <view class="radio-box">
                        <radio
                            :checked="saveData.country == 10000"
                            @click="onCountryRadio(10000)"
                        ></radio>
                        <view class="tit-txt">{{ externalTxt }}</view>
                    </view>
                </view>

                <!-- 地区 -->
                <view class="c-row" v-show="saveData.country == 1">
                    <view class="r-lb">{{ areaLb }}</view>
                    <pickerRegion
                        ref="pickerRegion"
                        @change="areaChange"
                        :defaultValue="defaulArea"
                    >
                    </pickerRegion>
                </view>

                <inputTxt
                    ref=""
                    :title="addressLb"
                    :value="saveData.address"
                    @input="inputAddress"
                ></inputTxt>

                <!-- 客户类别 -->
                <view class="c-row">
                    <view class="r-lb r-lb-30">{{ customTypeLb }}</view>
                    <dropdownMenu
                        ref="customTypeMenu"
                        :descObj="curCustoTypeObj"
                        :list="customerTypeList"
                        @changeMenu="setCustomeType"
                    >
                    </dropdownMenu>
                </view>

                <!-- 客户标签-->
                <view class="c-row">
                    <view class="r-lb r-lb-30">{{ customTag }}</view>
                    <view
                        class="r-lb r-lb-max-width"
                        :class="
                            saveData.tag_ck.length == 0 ? 'r-lb-no-content' : ''
                        "
                        >{{ customTagTxt }}</view
                    >
                    <view class="act-box">
                        <text
                            class="btn icon-font icon-style"
                            @click="onClickTagArrow"
                            >&#xe600;</text
                        >
                        <text
                            class="btn icon-font search-icon"
                            @click="onClickAddTag"
                            >&#xe606;</text
                        >
                    </view>
                </view>

                <!-- 初始欠款 -->
                <inputTxt
                    :type="'number'"
                    :title="money2Lb"
                    :value="money2"
                    @input="inputMoney2"
                    :disable="isHasRece"
                ></inputTxt>

                <!-- 默认报价-->
                <view class="c-row">
                    <view class="r-lb r-lb-30">{{ defautPriceLb }}</view>
                    <dropdownMenu
                        ref="priceMenu"
                        :descObj="priceObj"
                        :list="priceList"
                        @changeMenu="setPriceObj"
                    >
                    </dropdownMenu>
                </view>

                <!-- 开放云店-->
                <view class="c-row">
                    <view class="r-lb r-lb-30">{{ ydLb }}</view>
                    <view
                        class="r-lb r-lb-max-width"
                        :class="
                            saveData.shopid_yds.length == 0
                                ? 'r-lb-no-content'
                                : ''
                        "
                        >{{ ydTxt }}</view
                    >
                    <view class="act-box">
                        <text
                            class="btn icon-font icon-style"
                            @click="onClickYdArrow"
                            >&#xe600;</text
                        >
                    </view>
                </view>

                <!-- 备注说明-->
                <inputTxt
                    :title="remaskLb"
                    :value="saveData.remark"
                    @input="inputRemark"
                ></inputTxt>

                <!-- 经手人-->
                <view class="c-row" v-show="changeHandler">
                    <view class="r-lb r-lb-45">{{ handlerLb }}</view>
                    <dropdownMenu
                        ref="ucpMenu"
                        :descObj="curUcp"
                        :list="handlerList"
                        @changeMenu="setCurUcpValue"
                    >
                    </dropdownMenu>
                </view>

                <!-- 客户来源-->
                <inputTxt
                    :title="sourceLb"
                    :value="sourceTxt"
                    :disable="true"
                    v-if="actType == 1"
                ></inputTxt>
            </view>
        </view>

        <view class="a-d-btn-box">
            <view class="f-btn" @click="onSaveCustomer">保存</view>
        </view>
        <!-- 编辑图片 -->
        <imageCropper
            ref="imageCropper"
            :src="editUrl"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper>

        <!-- 标签列表选择窗口 -->
        <popTagWin
            ref="popTagWin"
            @selectTag="selectTag"
            @editTag="editTag"
            @selectYd="selectYd"
        ></popTagWin>

        <!-- 添加/编辑标签窗口 -->
        <popEditAddTagWin
            ref="popEditAddTagWin"
            @saveTagSuccess="saveTagSuccess"
        ></popEditAddTagWin>
    </view>
</template>

<script>
import minMaxClose from "../min-max-close.vue";

import windBtnContrl from "../../js/WinBtnContrl.js";

import addPhoto from "../comm/AddPhoto.vue";

import inputTxt from "../comm/InputTxt.vue";

import lang from "../../js/conf/Lang.js";

import imageCropper from "../comm/ImageCropper.vue";

import pickerRegion from "../comm/picker-region/picker-region.vue";

import staticConst from "../../js/const/StaticConst.js";

import searcher from "../../js/search/Searcher.js";

import dropdownMenu from "../comm/DropdownMenu.vue";

import customCtrl from "../../js/custom/CustomCtrl.js";

import popTagWin from "../comm/PopTagWin.vue";

import popEditAddTagWin from "../comm/PopEditAddTagWin.vue";

import https from "../../js/https/Https.js";

import localStore from "../../js/LocalStore.js";

import regionCtrl from "../../js/region/RegionCtrl.js";

import accessCtrl from "../../js/limit/AccessCtrl.js";

export default {
    //0：新增客户，1:编辑客户
    props: ["actType", "md"],
    components: {
        minMaxClose,
        addPhoto,
        inputTxt,
        imageCropper,
        pickerRegion,
        dropdownMenu,
        popTagWin,
        popEditAddTagWin,
    },
    data() {
        return {
            editUrl: "", //编辑图片地址

            //添加/编辑客户
            addCustomTitTxt: lang.customerTxt.addCustomTitTxt, //"新增客户",
            editCustomTitTxt: lang.customerTxt.editCustomTitTxt, //"编辑客户",
            nameLb: lang.customerTxt.nameLb, //"姓名",
            phoneLb: lang.customerTxt.phoneLb, //"手机",
            companyLb: lang.customerTxt.companyLb, //"公司",
            emailLb: lang.customerTxt.emailLb, //"邮箱",
            cuntryLb: lang.customerTxt.cuntryLb, //"国家",
            areaLb: lang.customerTxt.areaLb, //"地区",
            addressLb: lang.customerTxt.addressLb, //"地址",
            customTypeLb: lang.customerTxt.customTypeLb, //"客户类别",
            customTag: lang.customerTxt.customTag, //"客户标签",
            money2Lb: lang.customerTxt.money2Lb, //"初始欠款",
            defautPriceLb: lang.customerTxt.defautPriceLb, //"默认报价",
            ydLb: lang.customerTxt.ydLb, // "开放云店",
            remaskLb: lang.customerTxt.remaskLb, //"备注说明",
            handlerLb: lang.customerTxt.handlerLb, //"经手人",
            chinaTxt: lang.chinaTxt, //: "中国",
            externalTxt: lang.externalTxt, //:"国外",
            genderTxt: lang.genderTxt, //:"性别",
            manTxt: lang.manTxt, //:"男",
            womanTxt: lang.womanTxt, //:"女",

            money2: "",
            saveData: {
                id: "", //客户id   >0=修改
                name: "", //必填，客户名称
                avatar: "", //非必填客户头像 【填写oss 上传路径即可】
                cellphone: "", //注册手机号，与邮箱二选一必填
                email: "", //	邮箱，与邮箱二选一必填
                // money2:"", //初始欠款，null表示未设置过，未设置不可传该参数
                gender: "0", //	性别 0：未知、1：男、2：女
                company: "", //公司
                country: "1", //国家代码；中国=1；国外=10000
                province: "", //省份id,
                city: "", //市id
                area: "", //	区id
                address: "", //地址
                district: "", //省市区，
                typeid: "", //客户级别
                price_i: "", //默认报价序号
                yy_price_i: "",
                remark: "", //备注
                uid_cp: "", //	经手人
                isyun: "", //开放云店，1开，其他关
                isapp: "", //开放APP，1开，其他关
                status: "", //可用状态1 正常 2 禁用
                is_yy: "", //	预约板块1是其他否 默认否
                tag_ck: [], //客户标签 选中id 数组方式
                shopid_yds: [], //客户开发云店列表数组
            },
            avatarOrg: "", //原来的头像地址，取消时用的
            avatarRel: "", //相对路径头像

            //客户类型
            customerTypeList: [],
            curCustoTypeObj: {
                id: "0",
                title: lang.selectHTxt + lang.customerTxt.customTypeLb,
            },

            customTagTxt: lang.selectHTxt + lang.customerTxt.customTag,

            defaulArea: null,
            addressVal: "",

            tagsList: [], //标列表，

            isHasRece: false, //是否有初始欠款

            priceList: [], //价格档
            priceObj: {
                id: "0",
                title: lang.notSelectTxt,
            },

            ydList: [],
            ydTxt: lang.customerTxt.ydTipTxt,

            ydTitTxt: lang.customerTxt.ydTipTxt,

            handlerList: [], //经手人
            handlerLb: lang.customerTxt.handlerLb, //
            curUcp: {}, //当前经手

            sourceLb: lang.customerTxt.sourceLb,
            sourceTxt: "",

            changeHandler: true,
        };
    },

    methods: {
        /**移动窗口***/
        mousedown() {
            windBtnContrl.mousedown();
        },

        /****初始化数据****/
        async init(data) {
            this.clearData();
            await this.getPriceIList();
            this.changeHandler = await accessCtrl.getLimitChangeCustManger();
            this.handlerList = customCtrl.handlerList;
            this.ydList = customCtrl.ydList;
            this.setBaseInfo(data);
            this.setCustomTypeData();
            this.setPhoto();
            this.setRegion();
            this.setCustomTagData();
        },

        /*******上传头像*******/
        uploadAavatar(data) {
            this.editUrl = data.url;
        },

        /*****确认编辑图片****/
        confirm(data) {
            this.$refs.customAddPhoto.confirm(data, this.uploadPicSuccess);
        },

        /****取消上传****/
        cancel() {
            this.saveData.avatar = this.avatarOrg;
            this.setPhoto();
        },

        /*****上传图片成功*****/
        uploadPicSuccess(index, name) {
            this.avatarRel = name;
        },

        /*****清除数据*******/
        clearData() {
            (this.money2 = ""),
                (this.saveData = {
                    id: "", //客户id   >0=修改
                    name: "", //必填，客户名称
                    avatar: "", //非必填客户头像 【填写oss 上传路径即可】
                    avatarRel: "",
                    cellphone: "", //注册手机号，与邮箱二选一必填
                    email: "", //	邮箱，与邮箱二选一必填
                    gender: "0", //	性别 0：未知、1：男、2：女
                    company: "", //公司
                    country: "1", //国家代码；中国=1；国外=10000
                    province: "", //省份id,
                    city: "", //市id
                    area: "", //	区id
                    address: "", //地址
                    district: "", //省市区，
                    typeid: "", //客户级别
                    price_i: "", //默认报价序号
                    yy_price_i: "",
                    remark: "", //备注
                    uid_cp: "", //	经手人
                    isyun: "", //开放云店，1开，其他关
                    isapp: "", //开放APP，1开，其他关
                    status: "", //可用状态1 正常 2 禁用
                    is_yy: "", //	预约板块1是其他否 默认否
                    tag_ck: [], //客户标签 选中id 数组方式
                    shopid_yds: [], ////客户开发云店列表数组
                });
            this.avatarRel = ""; //相对路径头像
            this.avatarOrg = ""; //原来的头像地址，取消时用的
            this.isHasRece = false; //是否初始欠款

            (this.customerTypeList = []),
                (this.curCustoTypeObj = {
                    id: "0",
                    title: lang.selectHTxt + lang.customerTxt.customTypeLb,
                });
            this.customTagTxt = lang.selectHTxt + lang.customerTxt.customTag;

            this.priceList = []; //价格档
            this.priceObj = {
                id: "0",
                title: lang.notSelectTxt,
            };

            this.defaulArea = null;

            this.ydList = []; //云店列表
            this.ydTxt = lang.customerTxt.ydTipTxt;

            this.sourceTxt = "";
        },

        /****设置基础信息****/
        async setBaseInfo(data) {
            if (!data) {
                await this.setCurUcpValue();
                this.$refs.ucpMenu.setCurId(this.curUcp.id);
                return;
            }

            this.saveData.id = data.id;

            if (data.avatar) {
                this.saveData.avatar = data.avatar;
                this.avatarOrg = data.avatar;
            }

            if (data.avatar_rel) this.avatarRel = data.avatar_rel;

            if (data.gender) this.saveData.gender = data.gender;
            if (data.name) this.inputName(data.name);
            if (data.cellphone) this.inputPhone(data.cellphone);
            if (data.company) this.inputCompany(data.company);
            if (data.email) this.inputEmail(data.email);
            if (data.address) this.inputAddress(data.address);

            if (data.from_name) this.sourceTxt = data.from_name;

            if (data.province && data.province != 0 && data.province != "") {
                this.defaulArea = [];
                this.defaulArea = regionCtrl.getProCityArea(
                    data.province,
                    data.city,
                    data.area
                );
            }

            this.saveData.typeid = data.typeid;
            if (data.typeid > 0) {
                this.curCustoTypeObj = {
                    id: data.typeid,
                    title: data.typeid_name,
                };
            }

            if (data.tag_ck) {
                this.saveData.tag_ck = data.tag_ck;
                this.customTagTxt = data.tag_title;
            }

            if (data.rece > 0) {
                this.money2 = data.rece;
                this.isHasRece = true;
            }

            this.saveData.price_i = data.price_i;
            if (data.price_i > 0) {
                this.priceObj.id = data.price_i;
                this.priceObj.title = data.price_i_name;
            }
            if (data.yy_price_i > 0) {
                this.priceObj.id = data.yy_price_i;
                this.priceObj.title = data.yy_price_i_name;
            }
            if (data.yd_ls) {
                let tempYdList = [];
                data.yd_ls.map((v) => {
                    if (v.yd_ck == 1) {
                        tempYdList.push(v);
                    }
                });
                this.selectYd(tempYdList);
            }

            this.saveData.remark = data.remark;

            this.saveData.country = data.country;

            let cUcp = {};
            cUcp.id = data.uid_cp_rel;
            cUcp.title = data.uid_cp;
            this.setCurUcpValue(cUcp);
        },

        /****头像图片*****/
        setPhoto() {
            let data = {};
            data.type = staticConst.UPLOAD_AVATAR;
            data.list = [
                {
                    url: this.saveData.avatar,
                    imgs_base: "",
                    imgs: "",
                    isDel: false,
                },
            ];
            this.$refs.customAddPhoto.initPhotoData(data);
        },

        /****地区数据****/
        setRegion() {
            this.$refs.pickerRegion.initData();
        },

        /****输入性别****/
        onGenderRadio(value) {
            this.saveData.gender = value;
        },

        /**输入客户名称****/
        inputName(value) {
            this.saveData.name = value;
        },

        /****输入电话***/
        inputPhone(value) {
            this.saveData.cellphone = value;
        },

        /****输入公司***/
        inputCompany(value) {
            this.saveData.company = value;
        },

        /****输入email*****/
        inputEmail(value) {
            this.saveData.email = value;
        },

        /****选择国内/国外****/
        onCountryRadio(value) {
            this.saveData.country = value;
        },

        /****选择省市区****/
        areaChange(province, city, area) {
            let district = "";
            if (province) {
                district = province.name;
                this.saveData.province = province.code; //省份id,
            }
            if (city) {
                if (district == "") district = city.name;
                else district = district + "," + city.name;
                this.saveData.city = city.code; //市id
            }
            if (area) {
                if (district == "") district = area.name;
                else district = district + "," + area.name;
                this.saveData.area = area.code; //	区id
            }
            this.saveData.district = district; //省市区，
        },

        /*******输入地址*****/
        inputAddress(value) {
            this.saveData.address = value;
        },

        /*****客户类别数据*****/
        setCustomTypeData() {
            this.customerTypeList = searcher.customCatList;
        },

        /****设置客户类型数据*****/
        setCustomeType(item) {
            this.curCustoTypeObj.id = item.id;
            this.curCustoTypeObj.title = item.title;
            this.saveData.typeid = item.id;
        },

        /******设置标签数据*******/
        setCustomTagData(data) {
            this.tagsList = customCtrl.tagsList;
        },

        /*******标记选中的客户标签**********/
        checkedTagList() {
            for (let i = 0; i < this.tagsList.length; i++) {
                let obj = this.tagsList[i];
                for (let j = 0; j < this.saveData.tag_ck.length; j++) {
                    if (obj.id == this.saveData.tag_ck[j]) {
                        obj.checked = true;
                    }
                    obj.showBtn = false;
                }
                if (!obj.checked) obj.checked = false;
            }
        },

        /****点击箭头弹出客户标签窗口*****/
        onClickTagArrow() {
            this.checkedTagList();
            let data = {};
            data.type = 1;
            data.list = this.tagsList;
            data.title = this.customTag;
            this.$refs.popTagWin.show("show", data);
        },

        /****确定要选择的客户标签*****/
        selectTag(arr) {
            let len = arr.length;
            this.saveData.tag_ck = [];
            if (len == 0) {
                this.customTagTxt =
                    lang.selectHTxt + lang.customerTxt.customTag;
                return;
            }
            this.customTagTxt = "";
            for (let i = 0; i < len; i++) {
                this.saveData.tag_ck.push(arr[i].id);
                if (this.customTagTxt == "") {
                    this.customTagTxt = arr[i].title;
                } else {
                    this.customTagTxt = this.customTagTxt + "," + arr[i].title;
                }
            }
        },

        /****编辑标签*******/
        editTag(item) {
            let data = {};
            data.act = 2;
            data.title = lang.editTxt;
            data.item = item;
            this.$refs.popEditAddTagWin.show("show", data);
        },

        /****添加标签*****/
        onClickAddTag() {
            let data = {};
            data.act = 1;
            data.title = lang.addNewTitTxt;
            this.$refs.popEditAddTagWin.show("show", data);
        },

        /****添加客户标签成功*****/
        saveTagSuccess() {
            let that = this;
            let param = {};
            param.status = 1;
            https.customTagList(param, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    if (data.tag_ls) {
                        that.tagsList = customCtrl.tagsList = data.tag_ls;
                        that.$refs.popTagWin.setListData(that.tagsList);
                    }
                }
            }
        },

        /*****初始欠款******/
        inputMoney2(value) {
            this.money2 = value;
        },

        /******获取价格档列表*******/
        async getPriceIList() {
            let that = this;
            if (that.md == 15) {
                await https.loadProjectPriceList(back);
            } else {
                await https.loadPriceList(back);
            }
            function back(data) {
                if (!data) return;
                let len = data.length;
                for (let i = 0; i < len; i++) {
                    let obj = data[i];
                    let temp = {};
                    temp.id = obj.psort;
                    temp.title = obj.title;
                    that.priceList.push(temp);
                    if (obj.isod == 1 && that.md == 15) {
                        that.priceObj.id = obj.psort;
                        that.priceObj.title = obj.title;
                        that.saveData.yy_price_i = obj.psort;
                    }
                }
            }
        },

        /*******设置默认价格档*******/
        setPriceObj(item) {
            this.saveData.price_i = item.id;
            this.saveData.yy_price_i = item.id;
            this.priceObj.id = item.id;
            this.priceObj.title = item.title;
        },

        /*****开放云店****/
        onClickYdArrow() {
            this.checkedYdList();
            let data = {};

            data.list = this.ydList;
            data.type = 2;
            data.title = this.ydTitTxt;
            this.$refs.popTagWin.show("show", data);
        },

        /****标记选中的云店****/
        checkedYdList() {
            for (let i = 0; i < this.ydList.length; i++) {
                let obj = this.ydList[i];
                for (let j = 0; j < this.saveData.shopid_yds.length; j++) {
                    if (obj.id == this.saveData.shopid_yds[j]) {
                        obj.checked = true;
                    }
                }
                if (!obj.checked) obj.checked = false;
            }
        },

        /****确定要选择的开发云店*****/
        selectYd(arr) {
            let len = arr.length;
            this.saveData.shopid_yds = [];
            if (len == 0) {
                this.ydTxt = lang.customerTxt.ydTipTxt;
                return;
            }
            this.ydTxt = "";
            for (let i = 0; i < len; i++) {
                this.saveData.shopid_yds.push(arr[i].id);
                if (this.ydTxt == "") {
                    this.ydTxt = arr[i].name;
                } else {
                    this.ydTxt = this.ydTxt + "," + arr[i].name;
                }
            }
        },

        /****备注说明*****/
        inputRemark(value) {
            this.saveData.remark = value;
        },

        /********经手********/
        /****设置当前经手人****/
        async setCurUcpValue(data) {
            if (!data) {
                let user = await localStore.getUserInfo();
                if (user) {
                    this.curUcp.id = user.uid;
                    this.curUcp.title = user.uname;
                    console.log(
                        "==========1111===================",
                        this.curUcp
                    );
                }
            } else {
                this.curUcp = data;
            }
            this.saveData.uid_cp = this.curUcp.id;
        },

        /******权限控制*****/
        initLimit() {},

        /****保存客户******/
        onSaveCustomer() {
            let that = this;
            if (!this.isHasRece && this.money2 > 0)
                this.saveData.money2 = this.money2;
            this.saveData.avatar = this.avatarRel;
            let param = this.saveData;
            param.is_yy = this.md == 15 ? 1 : "";
            https.saveCustom(param, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    let obj = {};
                    if (that.saveData.id == "") obj.act = 0;
                    else obj.act = 1;
                    obj.id = data.data;
                    that.$emit("addCustomSuccess", obj);
                }
            }
        },
    },

    mounted() {},
};
</script>
<style lang="scss">
.customer-add {
    flex: 1;
    margin-left: 345px;
    height: 100vh;
    background-color: #fff;
    // box-sizing: border-box;
    .tit-box {
        border-bottom: 1px #ececec solid;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 70px;
        .add-g-title {
            font-size: 18px;
            padding-left: 20px;
            color: #333;
        }
    }

    .info-box {
        height: calc(100vh - 131px);
        padding-left: 20px;
        padding-right: 20px;
        border-bottom: 1px #ececec solid;
        .info-base {
            margin-bottom: 20px;
            .c-row {
                font-size: 14px;
                display: flex;
                align-items: center;
                padding-top: 10px;
                padding-bottom: 10px;
                border-bottom: 1px #ececec solid;
                position: relative;
                .r-lb {
                    padding-right: 60px;
                }

                .r-lb-max-width {
                    max-width: 330px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .r-lb-45 {
                    padding-right: 45px;
                }
                .r-lb-30 {
                    padding-right: 35px;
                }
                .radio-box {
                    display: flex;
                    padding-right: 20px;
                }

                .act-box {
                    position: absolute;
                    right: 20px;
                    .btn {
                        cursor: pointer;
                        font-size: 16px;
                        padding: 0 10px;
                    }
                    .btn:hover {
                        color: #3388ff;
                    }
                }
            }

            .r-lb-no-content {
                color: #999;
            }

            .no-line {
                border-bottom: none;
            }
        }
    }
    .a-d-btn-box {
        display: flex;
        height: 60px;
        width: 100%;
        bottom: 0;
        text-align: center;

        font-size: 16px;
        line-height: 60px;
        position: relative;
        .c-btn {
            color: #333;
            background-color: #fff;
            width: 100px;
            height: 100%;
            position: absolute;
            right: 200px;
        }
        .c-btn:hover {
            opacity: 0.9;
        }

        .f-btn {
            color: #fff;
            background-color: #3388ff;
            width: 200px;
            height: 60px;
            position: absolute;
            right: 0;
            cursor: pointer;
        }

        .f-btn:hover {
            opacity: 0.9;
        }
    }
}
</style>